import React, { useEffect, useRef, useState } from 'react';
import { useDispatch, useSelector, useHistory, useLocation } from 'umi';
import './Detaile.less';
const Detaile: React.FC = () => {
  const dispatch = useDispatch();
  const Location: any = useLocation();
  const history = useHistory();
  const [Aindex, setAindex] = useState<number>(0);
  //利用 umi的数据管理dva的方法useSelector 拿到数据
  const { IDes, yearList } = useSelector((module) => {
    return { ...module.user };
  });
  //派发接口S
  useEffect(() => {
    console.log(location);
    dispatch({
      type: 'user/IDetaile',
      payload: Location.state,
    });
    // dispatch({
    //     type: 'user/IMargin',
    //     payload: MasterID
    // })
  }, []);

  //点击跳入询问底价详情
  function JumDetaile(item: any) {
    console.log(111);
    history.push({
      pathname: '/CallDetaile',
      state: item,
    });
  }
  return (
    <div className="car">
      {
        <div className="content">
          {
            <div className="img">
              <img src={IDes?.CoverPhoto} alt="" />
              <span className="span">{IDes?.pic_group_count}张照片</span>
            </div>
          }
          {
            <div className="info">
              <p>{IDes?.market_attribute?.dealer_price}</p>
              <p>指导价：{IDes?.market_attribute?.official_refer_price}</p>
              {
                <div className="action">
                  <button
                    onClick={() => {
                      JumDetaile(IDes);
                    }}
                  >
                    询问底价
                  </button>
                </div>
              }
            </div>
          }
          {
            <div className="car-list">
              <div className="c-type">
                {yearList.map((item: any, index: number) => {
                  return (
                    <span
                      key={index}
                      className={index === Aindex ? 'active' : ''}
                    >
                      {item}
                    </span>
                  );
                })}
              </div>
              {IDes?.list?.map((item: any, index: number) => {
                return (
                  <div>
                    <p key={index}>
                      {item?.exhaust_str}/{item?.max_power_str}
                      {item?.inhale_type}
                    </p>
                    <ul>
                      <li>
                        <p>
                          {item?.market_attribute?.year}款 {item?.car_name}
                        </p>
                        <p>
                          {item?.horse_power}马力{item?.gear_num}档
                          {item?.trans_type}
                        </p>
                        <p>
                          <span>
                            指导价{item?.market_attribute?.dealer_price_max}
                          </span>
                          <span>
                            {item?.market_attribute?.dealer_price_min}起
                          </span>
                        </p>
                        <button
                          onClick={() => {
                            JumDetaile(item);
                          }}
                          className="xunwen"
                        >
                          询问底价
                        </button>
                      </li>
                    </ul>
                  </div>
                );
              })}
            </div>
          }
        </div>
      }
    </div>
  );
};
export default Detaile;
